<template>
  <div style="width: 100%; height: 100%" class="chart dfsp">
    <div class="content_r_t dfsp">
      <el-select class="select size16" v-model="type" size="large" @change="Changetype">
        <el-option
          v-for="item in options"
          :key="item.title"
          :label="item.title"
          :value="item.title"
        />
      </el-select>
      <div
        :class="['item-default', 'size16', 'sizefw', k.type == FromState ? 'actItem' : '']"
        v-for="(k, i) in StateList"
        :key="i"
        @click="StateTap(k.type)"
      >
        <span>
          {{ k.title }}
        </span>
      </div>
    </div>
    <div class="content_r_b" v-loading="ListLoading">
      <div class="dfsp size16">
        <div class="title">
          <div class="size16 sizefw" style="color: #dcd5cf">
            {{ websocketData.title }}
          </div>
          <div>
            <text class="transaction">{{ t('transactionstatus') }}:</text>
            <text v-if="websocketData.isopen == 1" class="zhang">({{ t('opening') }})</text>
            <text v-else class="close">({{ t('closed') }})</text>
          </div>
        </div>
        <div class="btnwarp dfsp">
          <el-button
            :disabled="websocketData.isopen == 1 ? false : true"
            class="zhangbg itembtn"
            @click="TapPurchase('买涨')"
            >{{ t('goinglong') }}</el-button
          >
          <el-button
            :disabled="websocketData.isopen == 1 ? false : true"
            class="diebg itembtn"
            @click="TapPurchase('买跌')"
            >{{ t('buydown') }}</el-button
          >
        </div>
      </div>
      <!--  -->
      <div class="myhqchart">
        <hqchart ref="HQChartCtrl" :SetdataList="SetdataList"></hqchart>
      </div>
      <!--  -->
      <div class="dfsp tips">
        <div>
          <div v-if="websocketData.open" class="tips-data">
            <div class="tips-title">{{ t('updownamount') }}</div>
            <div class="data">
              <el-icon><CaretRight /></el-icon>
              {{ (websocketData.open - websocketData.close).toFixed(2) || '' }}
            </div>
          </div>
          <div v-if="websocketData.open" class="tips-data">
            <div class="tips-title">{{ t('riseandfall') }}</div>
            <span class="data">
              <el-icon><CaretRight /></el-icon>
              {{ (websocketData.open / websocketData.close).toFixed(2) || '' }}%
            </span>
          </div>
        </div>
        <div>
          <div class="tips-data">
            <div class="tips-title">
              {{ t('openingvalue') }}
            </div>
            <div class="data">
              <el-icon><CaretRight /></el-icon>
              <el-statistic :value="parseFloat(websocketData.open || 0)"> </el-statistic>
            </div>
          </div>
          <div class="tips-data">
            <div class="tips-title">{{ t('receivedvalueyesterday') }}</div>
            <div class="data">
              <el-icon><CaretRight /></el-icon>
              <el-statistic :value="parseFloat(websocketData.close || 0)"> </el-statistic>
            </div>
          </div>
          <div class="tips-data">
            <div class="tips-title">{{ t('sellprice') }}</div>
            <div class="data">
              <el-icon><CaretRight /></el-icon>
              <el-statistic :value="parseFloat(websocketData.price || 0)"> </el-statistic>
            </div>
          </div>
        </div>
        <div>
          <div class="tips-data">
            <div class="tips-title">{{ t('maximumprice') }}</div>
            <div class="data">
              <el-icon><CaretRight /></el-icon>
              <el-statistic :value="parseFloat(websocketData.high || 0)"> </el-statistic>
            </div>
          </div>
          <div class="tips-data">
            <div class="tips-title">{{ t('bottomprice') }}</div>
            <div class="data">
              <el-icon><CaretRight /></el-icon>
              <el-statistic :value="parseFloat(websocketData.low || 0)"> </el-statistic>
            </div>
          </div>
          <div class="tips-data">
            <div class="tips-title">{{ t('buyquantity') }}</div>
            <div class="data">
              <el-icon><CaretRight /></el-icon>
              <el-statistic :value="parseFloat(websocketData.B1V || 0)"> </el-statistic>
            </div>
          </div>
        </div>
        <div>
          <div class="tips-data">
            <div class="tips-title">{{ t('sellquantity') }}</div>
            <div class="data">
              <el-icon><CaretRight /></el-icon>
              <el-statistic :value="parseFloat(websocketData.S1V || 0)"> </el-statistic>
            </div>
          </div>
          <div class="tips-data">
            <div class="tips-title">{{ t('todaytradingvolume') }}</div>
            <div class="data">
              <el-icon><CaretRight /></el-icon>
              <el-statistic :value="parseFloat(websocketData.V || 0)"> </el-statistic>
            </div>
          </div>
          <div class="tips-data">
            <div class="tips-title">{{ t('todaytransactionvolume') }}</div>
            <div class="data">
              <el-icon><CaretRight /></el-icon>
              <el-statistic :value="parseFloat(websocketData.A || 0)"> </el-statistic>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 现充 -->
    <el-dialog
      v-model="Current"
      :title="t('confirmorder')"
      width="30%"
      :close-on-click-modal="false"
    >
      <div class="Current">
        <p class="tip">{{ t('expirationtime') }}:</p>
        <div class="dfsp Current_hade">
          <div
            v-for="(k, i) in orderList.info.order_time"
            :key="i"
            :class="getprofit == k.profit ? 'textbg' : ''"
            @click="setprofit(k)"
          >
            <p>{{ t('settlementtime') }}</p>
            <text>{{ k.time }} {{ t('second') }}</text>
            <text class="zhang">{{ k.profit }}%</text>
          </div>
        </div>

        <p class="tip">{{ t('investment') }}:</p>
        <div class="dfsp Current_center">
          <div
            v-for="(k, i) in orderList.pay_choose"
            :key="i"
            :class="getmonny == k ? 'textbg' : ''"
            @click="setmonny(k)"
          >
            <text>NET</text>
            <text>{{ k }}</text>
          </div>
          <div class="myinput">
            <el-input type="text" v-model="getmonny" />
          </div>
        </div>
        <p class="tip">{{ t('paymentmethod') }}:</p>
        <div class="pay dfsp">
          <div class="item" @click="setpay(1)" :class="getpay == 1 ? 'textbg' : ''">
            {{ t('transaction') }}
          </div>
          <div class="item" @click="setpay(2)" :class="getpay == 2 ? 'textbg' : ''">
            {{ t('imitate') }}
          </div>
        </div>
        <div class="dfsp Current_end">
          <div>
            <text>{{ t('name') }}</text>
            <text>{{ orderList.info.title }}</text>
          </div>
          <div>
            <text>{{ t('direction') }}</text>
            <text v-if="title == '买涨'" class="zhang">{{ t('goinglong') }}</text>
            <text v-else class="die">{{ t('buydown') }}</text>
          </div>
          <div>
            <text>{{ t('currentprice') }}</text>
            <text>{{ websocketData.price }}</text>
          </div>
          <div>
            <text>{{ t('fee') }}</text>
            <text>{{ getmonny }}</text>
          </div>
        </div>
        <div>
          <text class="zhang"
            >{{ t('projectedRevenue') }}
            {{ (Number(getmonny) + Number(getmonny) * (Number(getprofit) / 100)).toFixed(2) }}</text
          >
        </div>
        <el-button class="btn btnbg" @click="TapCurrent">{{ t('confirmorder') }}</el-button>
      </div>
    </el-dialog>
    <!-- 期指 -->
    <el-dialog
      v-model="Expectation"
      :title="t('confirmorder')"
      width="22%"
      :close-on-click-modal="false"
    >
      <div class="Expectation Period">
        <div class="f26">
          <div class="dfsp">
            <div>{{ t('name') }}：{{ orderList.info.title }}</div>

            <div style="margin-top: 5px">
              {{ t('direction') }}：
              <text v-if="title == '买涨'" class="zhang">{{ t('goinglong') }}</text>
              <text v-else class="die">{{ t('buydown') }}</text>
            </div>
          </div>
          <div class="dfsp">
            <div style="margin-top: 5px">
              {{ t('currentprice') }}：<text class="zhang">{{ websocketData.price }}</text>
            </div>
            <div>
              {{ t('fee') }}：<text v-if="orderList && !checked">0.00</text>
              <text v-if="orderList && checked">{{
                setaddGoodsOrder.spot_sum * orderList.info.spot_price
              }}</text>
            </div>
          </div>
        </div>
        <div class="df">
          <div class="tip">{{ t('minimumRunoutPoint') }}</div>
          <text v-if="orderList">{{ orderList.info.min_dump ? orderList.info.min_dump : 0 }}</text>
        </div>
        <div class="df">
          <div class="tip">{{ t('priceperpoint') }}</div>
          <text v-if="orderList">{{
            orderList.info.spot_price ? orderList.info.spot_price : 0
          }}</text>
        </div>
        <div class="df">
          <div class="tip">{{ t('handlingfeeperport') }}</div>
          <text v-if="orderList">{{
            orderList.info.mouth_price ? orderList.info.mouth_price : 0
          }}</text>
        </div>
        <div class="dfsp hang-style">
          <div>{{ t('stoplossstopprofit') }}</div>
          <el-switch v-model="checked" color="#2a45a8"></el-switch>
          <el-button class="btnbg hanging f24" @click="Sethanging">{{ t('prehanging') }}</el-button>
        </div>
        <div class="df input-number" v-if="Hanging">
          <div class="tip">{{ t('prehanging') }}</div>
          <el-input-number
            @change="Hangingchange"
            v-model="setaddGoodsOrder.before_dot"
            :min="1"
            :precision="2"
            :max="99999999"
            :step="Number(orderList.info.min_dump)"
          />
        </div>
        <div class="df" v-if="checked">
          <div class="tip">{{ t('checknumber') }}</div>
          <el-input v-model="setaddGoodsOrder.spot_sum" class="input"></el-input>
        </div>
        <div class="df">
          <div class="tip">{{ t('mouthsum') }}</div>
          <el-input v-model="setaddGoodsOrder.mouth_sum" class="input"></el-input>
        </div>

        <div class="df" v-if="orderList">
          <div class="tip">{{ t('sx_fee') }}</div>
          <text>{{ setaddGoodsOrder.mouth_sum * orderList.info.mouth_price }}</text>
        </div>
        <p class="tip">{{ t('paymentmethod') }}:</p>
      </div>
      <div class="pay dfsp" style="margin: 10px 0">
        <div class="item" @click="setpay(1)" :class="getpay == 1 ? 'textbg' : ''">
          {{ t('transaction') }}
        </div>
        <div class="item" @click="setpay(2)" :class="getpay == 2 ? 'textbg' : ''">
          {{ t('imitate') }}
        </div>
      </div>
      <div class="dfsp">
        <el-button class="btn btnbg" @click="Tapconfing">{{ t('confirmorder') }}</el-button>
      </div>
    </el-dialog>
    <!-- 支付密码 -->
    <el-dialog
      v-model="orderpay"
      :title="t('enterpaymentpassword')"
      width="36%"
      :close-on-click-modal="false"
    >
      <div class="paypws dfsp">
        <pay ref="getpaypws"></pay>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import hqchart from './hqchart.vue'
// import hqchart from '@/components/jones-hqchart2/js_sdk/HQChartControl.vue'
import { useRouter } from 'vue-router'
const router = useRouter() //路由
import pay from './pay.vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
const store = useStore() //vuex
const { proxy } = getCurrentInstance()
import { getToken } from '@/utils/cookies.js'
import { reactive, ref, onMounted, getCurrentInstance, computed, watch, nextTick } from 'vue'
const props = defineProps({
  GoDetailId: {
    type: String,
    default: '1',
  },
  FromType: {
    type: String,
    default: '1',
  },
})
const HQChartCtrl = ref()
const type = ref('k线图')
const options = [
  {
    title: 'k线图',
  },
  {
    title: 'MACD',
    type: 'MACD',
  },
  {
    title: 'KDJ',
    type: 'KDJ',
  },
  {
    title: 'RSI',
    type: 'RSI',
  },
]
const Changetype = () => {
  console.log(HQChartCtrl.value.ChangeKLineIndex)
  if (type.value == 'MACD') {
    HQChartCtrl.value.ChangeKLineIndex(1, 'MACD')
  }
  if (type.value == 'RSI') {
    HQChartCtrl.value.ChangeKLineIndex(1, 'RSI')
  }
  if (type.value == 'KDJ') {
    HQChartCtrl.value.ChangeKLineIndex(1, 'KDJ')
  }
}
const FromState = ref('1M')
const StateList = reactive([
  {
    title: '1M',
    type: '1M',
  },
  {
    title: '5M',
    type: '5M',
  },
  {
    title: '30M',
    type: '30M',
  },
  {
    title: '1H',
    type: '1H',
  },
  {
    title: '1D',
    type: 'D',
  },
])
const StateTap = (state) => {
  FromState.value = state
  GoodsKdata.time = state
  if (ListType.value == 1) {
    getGoodsKdata()
  } else {
    getKdata()
  }
}
// 获取详情
const websocketData = computed(() => {
  return store.state.MarketEntity
})
onMounted(() => {
  GetUser()
  store.state.userpws = []
  if (ListType.value == 1) {
    getGoodsKdata()
  } else {
    getKdata()
  }
  setTimeout(() => {
    proxy.$websocket.send(getinfo)
  }, 1500)
})
const getinfo = reactive({
  type: 'quotation_goods_detail',
  token: getToken(),
  goods_id: 1,
  lang: getToken('Lang') || store.state.Lang,
})
//
const ListLoading = ref(true)
const ListType = ref(props.FromType) //期指还是现充
// 监听 是否切换类型
watch(
  () => [props.GoDetailId, props.FromType],
  (newValue, oldValue) => {
    getinfo.goods_id = newValue[0]
    GoodsKdata.id = newValue[0]
    ListType.value = newValue[1]
    ListLoading.value = true
    if (newValue[1] == 1) {
      getinfo.type = 'quotation_goods_detail'
      getGoodsKdata()
    } else {
      getKdata()
      getinfo.id = newValue[0]
      getinfo.type = 'quotation_detail'
    }

    proxy.$websocket.send(getinfo)
  }
)
// 监听获取的数据
watch(
  () => websocketData.value,
  (newValue, oldValue) => {
    // console.log(oldValue)
    if (newValue == 'null') {
      ListLoading.value = true
    } else {
      ListLoading.value = false
    }
  }
)
// 下单
const GoodsKdata = reactive({
  id: props.GoDetailId,
  time: '1M',
})
const getGoodsKdata = () => {
  proxy
    .$post('/mt4/Product/getGoodsKdata', GoodsKdata)
    .then((res) => {
      Setdata(res)
    })
    .catch((res) => {})
}
const getKdata = () => {
  proxy
    .$post('/mt4/Product/getKdata', GoodsKdata)
    .then((res) => {
      Setdata(res)
    })
    .catch((res) => {})
}
// 处理数据
const SetdataList = ref({})
const Setdata = (res) => {
  let data = res.data ? res.data.split(';') : []
  let item = []
  let arr = []
  let obj = {
    symbol: '35353',
    name: '',
    start: 7690,
    end: 4691,
    count: 7691,
    ticket: 15,
    version: '2.0',
    message: null,
    code: 0,
    servertime: '2023-06-08 23:08:17',
    data: [],
  }

  for (let i = 0; i < data.length; i++) {
    let itemlist = data[i].split(',')[0]
    item = data[i].split(',')
    let getTime = SetTime(itemlist.split(',')[0])
    item[0] = getTime[0]
    let setitem = []
    setitem.push(Number(item[0])) //日期
    setitem.push(Number(item[6])) //未知
    setitem.push(Number(item[2])) //开
    setitem.push(Number(item[3])) //高
    setitem.push(Number(item[4])) //低
    setitem.push(Number(item[1])) //收
    setitem.push(Number(item[5])) //量
    setitem.push(Number(item[1] - item[2])) //额
    setitem.push(Number(getTime[1])) //时间小时
    arr.unshift(setitem)
  }
  obj.data = arr
  SetdataList.value = obj
  HQChartCtrl.value.OnSize()
  HQChartCtrl.value.CreateKLineChart(4, SetdataList.value)
}

// 处理时间
const SetTime = (timestamp) => {
  let date = new Date(parseInt(timestamp) * 1000)
  let Year = date.getFullYear()
  let Moth = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
  let Day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
  let Hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
  let Minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
  let Sechond = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  // let GMT = Year + '-' + Moth + '-' + Day + '   ' + Hour + ':' + Minute + ':' + Sechond;
  let GMT = []
  GMT.push(Year + Moth + Day)
  GMT.push(Hour + Minute)
  return GMT
}
// 购买
const orderList = ref()
const Current = ref(false) //现充弹出
const title = ref('') //买涨跌
const getTime = ref('') //时间
const getprofit = ref('') //比例
const getmonny = ref('') //收益
const getpay = ref(1) //支付方式
const setpay = (i) => {
  getpay.value = i
}
const setprofit = (i) => {
  getTime.value = i.time
  getprofit.value = i.profit
}
const setmonny = (i) => {
  getmonny.value = i
}
const TapPurchase = (i) => {
  title.value = i
  order_type.value = i == '买涨' ? 0 : 1
  if (ListType.value == 1) {
    getGoodsDetail()
  } else {
    getDetail()
  }
}
const getGoodsDetail = () => {
  proxy
    .$post('/mt4/Product/getGoodsDetail', {
      id: GoodsKdata.id,
    })
    .then((res) => {
      orderList.value = res.data
      Expectation.value = true
    })
    .catch((res) => {})
}
const getDetail = () => {
  proxy
    .$post('/mt4/Product/getDetail', {
      id: GoodsKdata.id,
    })
    .then((res) => {
      orderList.value = res.data
      orderList.value.pay_choose = orderList.value.pay_choose.split('|')
      getTime.value = orderList.value.info.order_time[0].time
      getprofit.value = orderList.value.info.order_time[0].profit
      getmonny.value = orderList.value.pay_choose[0]
      Current.value = true
    })
    .catch((res) => {})
}
// 现充下单
// 获取详情
const getuserpws = computed(() => {
  let num = []
  store.state.userpws.forEach((k, i) => {
    if (k != '') {
      num.push(k)
    }
  })
  return num
})
// 输入密码
watch(
  () => getuserpws.value,
  (newValue, oldValue) => {
    // console.log(pay_password.value)
    if (newValue.length == 6) {
      newValue.forEach((k, i) => {
        pay_password.value += k
      })
      if (props.FromType == 1) {
        addGoodsOrder()
      } else {
        addOrder()
      }
    } else {
      pay_password.value = ''
    }
  }
)
//
const Expectation = ref(false) //支付弹出
const orderpay = ref(false) //支付弹出
const pay_password = ref()
const order_type = ref()
const addOrder = () => {
  let obj = {
    money_type: getpay.value,
    pay_password: pay_password.value,
    product_id: GoodsKdata.id,
    order_price: getmonny.value,
    order_sen: getTime.value,
    order_type: order_type.value,
  }
  proxy
    .$post('/mt4/Order/addOrder', obj)
    .then((res) => {
      ElMessage({
        message: res.msg,
        type: 'success',
      })
      router.push('/reportForm/reportForm')
    })
    .catch((res) => {
      // pay_password.value=''
    })
}
const checked = ref(true)
const Hanging = ref(false)
watch(
  () => checked.value,
  (newValue, oldValue) => {
    if (checked.value) {
      setaddGoodsOrder.play_type = 1
    } else {
      setaddGoodsOrder.play_type = 2
    }
  }
)

const userInfo = ref({})
const GetUser = () => {
  proxy
    .$post('/mt4/Member/index', {})
    .then((res) => {
      userInfo.value = res.data
      store.state.userInfo = res.data
    })
    .catch((res) => {})
}
// 现充验证
const TapCurrent = () => {
  if (userInfo.value.pay_password != 1) {
    ElMessage.error(t('pleaseentersetpaymentpws'))
    return
  }
  if (userInfo.value.auth.isauth == undefined || userInfo.value.auth.isauth == null) {
    ElMessage.error(t('pleaseauthenticatename'))
    return
  } else if (userInfo.value.auth.isauth != 1) {
    ElMessage.error(t('undercertification'))
    return
  }
  orderpay.value = true
}
// 期指验证
const Tapconfing = () => {
  let Data = Number(setaddGoodsOrder.spot_sum) / Number(orderList.value.info.min_dump)
  if (checked.value) {
    if (Data != Math.trunc(Data)) {
      ElMessage.error(t('pointspositiveinteger'))
      return
    } else if (setaddGoodsOrder.spot_sum == '') {
      ElMessage.error(t('pleaseenternumberpoint'))
      return
    }
  }
  // 口数
  if (setaddGoodsOrder.mouth_sum == '') {
    ElMessage.error(t('pleaseenternumberport'))
    return
  }
  if (userInfo.value.pay_password != 1) {
    ElMessage.error(t('pleaseentersetpaymentpws'))
    return
  }
  if (userInfo.value.auth.isauth == undefined || userInfo.value.auth.isauth == null) {
    ElMessage.error(t('pleaseauthenticatename'))
    return
  } else if (userInfo.value.auth.isauth != 1) {
    ElMessage.error(t('undercertification'))
    return
  }
  orderpay.value = true
}
const Sethanging = () => {
  console.log(websocketData.value)
  setaddGoodsOrder.before_dot = websocketData.value.price
  Hanging.value = !Hanging.value
  if (Hanging.value) {
    setaddGoodsOrder.buy_type = 1
  } else {
    setaddGoodsOrder.buy_type = 0
  }
}
const setaddGoodsOrder = reactive({
  product_id: '',
  play_type: 1,
  mouth_sum: '',
  money_type: '1',
  pay_password: '',
  order_type: '',
  spot_sum: '',
  buy_type: 0,
  before_dot: '',
})
const addGoodsOrder = () => {
  setaddGoodsOrder.pay_password = pay_password.value
  if (!checked.value) {
    setaddGoodsOrder.spot_sum = 0
  }
  if (!Hanging.value) {
    setaddGoodsOrder.before_dot = 0
  }
  setaddGoodsOrder.product_id = GoodsKdata.id
  setaddGoodsOrder.order_type = order_type.value

  proxy
    .$post('/mt4/Order/addGoodsOrder', setaddGoodsOrder)
    .then((res) => {
      ElMessage({
        message: res.msg,
        type: 'success',
      })
      router.push('/reportForm/reportForm')
    })
    .catch((res) => {
      // pay_password.value=''
    })
}
</script>

<style lang="less" scoped>
.textbg {
  background-color: #dcd5cf !important;
  text-align: center;
  color: #bb8d62 !important;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid #bb8d62;
  padding: 5px 30px;
  border-radius: 25px;

  &:hover {
    cursor: pointer;
  }
}

.btn {
  width: 100%;
  border-radius: 25px;
  border: 1px solid #bb8d62;
  background-color: #dcd5cf !important;
  color: #242424 !important;
  margin-top: 20px;
}

.Period {
  > div {
    margin: 12px 0;
    color: #dcd5cf;

    > div {
      // margin: 10px 0;
    }
  }
  .hang-style {
    ::v-deep {
      .el-button {
        background-color: #bb8d62 !important;
        color: #fdf6de;
        border-radius: 10px;
        border: 1px solid #bb8d62;
      }
    }
  }
  .hanging {
    padding: 2px 10px !important;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #7c7c7c;
  }

  .input {
    width: 150px;
    font-size: 12px;
    // background: #f5f5f5;
    // color: #333;
    // padding: 0 5px;
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;
    line-height: 25px;
    height: 25px;
    margin: 1rpx 0;
  }

  .tip {
    width: 100px;
  }

  .df {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
.paypws {
  .myinput {
    outline: none;
    width: 80px;
    height: 80px;
  }
}

.pay {
  justify-content: center;
  gap: 20px;

  .item {
    width: 120px;
    padding: 8px;
    box-sizing: border-box;
    text-align: center;
    color: #969696;
    font-weight: 500;
    border: 1px solid #4f4f4f;
    padding: 8px 30px;
    border-radius: 25px;
    font-size: 16px;
    background-color: #4f4f4f;
  }
}

.Current {
  font-size: 12px;
  text-align: center;

  .tip {
    font-size: 16px !important;
    text-align: left;
    // font-weight: 700;
  }

  .btn {
    width: 200px;
    text-align: center;
    margin-top: 20px;
    padding: 20px 0;
  }

  text {
    display: block;
    text-align: center;
    margin: 5px 0;
  }

  > div {
    margin: 10px 0;
  }
}

.Current_center {
  > div {
    width: 18%;
    padding: 15px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    border-radius: 5px;
    height: 62px;
    cursor: pointer;
  }

  text {
    margin: 0;
  }

  .myinput {
    width: 22%;
    outline: none;

    input {
      width: 100%;
      outline: none;
      margin-top: 5px;
    }
  }
}

.Current_hade {
  > div {
    width: 24%;
    padding: 15px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    border-radius: 5px;
    cursor: pointer;
  }
}

.Current_end {
  > div {
    width: 25%;
  }

  text {
    font-size: 13px;
    display: block;
    text-align: center;
    margin: 7px 0;
  }
}

.chart {
  flex-direction: column;
  align-items: flex-start;
}

.content_r_t {
  width: 100%;
  justify-content: flex-start;
  background: #0b0b0c;
  border-radius: 5px;
  padding: 10px 0;

  .select {
    margin-right: 20px;
  }

  .item-default {
    // margin-right: 20px;
    color: #fdf6de;
    padding: 5px 20px;
    cursor: pointer;
    box-sizing: border-box;
    border-left: 1px solid #7c7c7c;
    border-top: 1px solid #7c7c7c;
    border-bottom: 1px solid #7c7c7c;
  }

  .item-default:last-of-type {
    border-radius: 0 5px 5px 0;
    border-right: 1px solid #7c7c7c;
  }
  .item-default:nth-child(2) {
    border-radius: 5px 0 0 5px;
  }

  .actItem {
    color: #fdf6de;
    background-color: #bb8d62;
    border: 1px solid #7c7c7c;
  }
}

.content_r_b {
  width: 100%;
  height: calc(100% - 70px);
  background-color: rgb(8, 8, 8);
  padding: 20px 0;
  box-sizing: border-box;
  margin: 10px 0 0 10px;

  .btnwarp {
    .itembtn {
      padding: 20px 30px !important;
      margin: 0 10px;
      font-size: 17px;
      font-weight: 700;
    }

    .zhangbg {
      background: #aa4133 !important;
      border-color: #ff8181;
    }

    .diebg {
      background: #49a41b !important;
      border-color: #92e569;
    }

    ::v-deep {
      .el-button {
        color: #fdf6de;
      }
    }
  }
  .myhqchart {
    height: calc(100% - 140px);
    margin: 10px 0;
    background: rgb(26, 26, 26);
    padding: 10px;
  }

  .tips {
    font-size: 14px;
    .tips-title {
      min-width: 35%;
    }

    .tips-data {
      display: flex;
      color: #fdf6de;
      align-items: center;
      gap: 5px;
      margin: 4px 0;
      ::v-deep {
        .el-statistic__content {
          font-size: 14px;
          color: #fdf6de;
        }

        .el-icon {
          color: #bb8d62;
          font-size: 16px;
        }
      }

      .data {
        display: flex;
        align-items: center;
        gap: 20px;
        width: 80%;
      }
    }

    text {
      display: inline-block;
      width: 100px;
      color: #fdf6de;
    }

    > div {
      width: 25%;
      margin: 5px 0;

      div {
        text {
          width: auto !important;
        }
      }
    }
  }

  .title {
    display: flex;
    align-items: center !important;
    line-height: 40px;
    margin-left: 10px;
    > div {
      margin-right: 30px;
    }

    text {
      font-size: 14px;
      color: #dcd5cf;
    }

    .zhang {
      color: #bb8d62;
    }
    .close {
      color: #bb8d62;
    }
  }
}

/deep/ .el-dialog__body {
  padding-top: 10px;
}

::v-deep {
  .el-dialog {
    background: linear-gradient(#212121, #0f0f0f);
    border: 1px solid #4f4f4f;
    border-radius: 10px;
  }
  .el-dialog__header {
    margin-right: 0;
    color: #bb8d62;
    border-bottom: 2px solid #4f4f4f;
    padding: 20px;
  }

  .el-dialog__title {
    color: #bb8d62;
  }

  .el-input__wrapper {
    background: #212121;
    border: 1px solid #434343;
    border-radius: 4px;
    box-shadow: none !important;

    &:hover {
      box-shadow: none !important;
    }
  }

  .el-input {
    border: 1px solid #434343;
    border-radius: 25px;
  }

  .el-input__inner {
    color: #dcd5cf;
  }

  .el-input-group__append {
    background: #212121;
    box-shadow: none;
  }

  .el-select--large {
    width: 100%;
  }

  .el-input-number__decrease {
    background: #212121;
    border-right: 1px solid #434343;
  }

  .el-input-number__increase {
    background: #212121;
    border-left: 1px solid #434343;
  }

  .input-number {
    .el-input {
      border: 1px solid #434343;
      border-radius: 0;
    }
  }
}
</style>
